<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page  isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>Comunidad Garmendia</title>
	
	<style type="text/css">
		<%@ include file="/css/style.css"%>  
	</style>
	
	<link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" media="screen"/>
	<link href="css/gallery.css" rel="stylesheet" type="text/css" media="screen"/>
	<link href="css/tabs.css" rel="stylesheet" type="text/css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
	
	<style>
		/* tab pane styling */
		div.panes div {
			display:none;		
			padding:15px 10px;
			border:none;
			height:100px;
			font-size:14px;
			background-color:#fff;
		}
	</style>
	
	<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
    
    <script type="text/javascript">
        dojo.require("dijit.Dialog");
     </script>
	
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
    <script src="js/NFLightBox.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function() {
        var settings = { containerResizeSpeed: 350 };
            $('#gallery a').lightBox(settings);
        });
    </script>
    
    <script>
		$(function() {
			// setup ul.tabs to work as tabs for each div directly under div.panes
			$("ul.tabs").tabs("div.panes > div");
		});
	</script>

    <script type="text/javascript">

		onload = function(){
			hidePlayersTable();
		}

		function confirmedPlayersCallback(data){
			document.getElementById('playersList').innerHTML = data;
			dijit.byId("playersTable").show();
		} 

		function hidePlayersTable(){
			dijit.byId("playersTable").hide();
		}
	
		function getConfirmedPlayers(gameId) {
    		$.post("getConfirmedPlayers.do",{gameId :gameId} ,confirmedPlayersCallback);	
        }        

    	function showDialogTwo() {
	        dijit.byId("didi").show();
	    }

		function assistCallback(){
			document.getElementById("assistButton").style.display = 'none';
			document.getElementById("notAssistButton").style.display = 'block';
			dijit.byId("didi").hide();
		}

		function notAssistCallback(){
			document.getElementById("assistButton").style.display = 'block';
			document.getElementById("notAssistButton").style.display = 'none';
			dijit.byId("didi").hide();
		}

		function assist(gameId){
			showDialogTwo();
			$.post("makeChoice.do", { gameId: gameId, choice: "assist" },assistCallback);
		}
		
		function notAssist(gameId){
			showDialogTwo();
			$.post("makeChoice.do", { gameId: gameId, choice: "notAssist" },notAssistCallback);
		}

		function changeTab(){
			images = document.getElementById("gallery");
			document.getElementById("imagesEmpty").innerHTML = images.innerHTML;
		}

		function hideSideBar(){
			document.getElementById("gallery").style.height = "650px";
			document.getElementById("gallery").style.width = "800px";
			document.getElementById("sidebar").style.display = "none";
		}

		function enableSideBar(){
			document.getElementById("sidebar").style.display = "block";
		}
	</script>
	
</head>


<body>

	<div id="wrapper">
	
		<!-- the tabs -->
		<ul class="tabs">
			<li><a href="#" onclick="enableSideBar();">Home</a></li>
			<li><a href="#" onclick="hideSideBar();">Fotos</a></li>
			<li><a href="#" onclick="enableSideBar();">Videos</a></li>
			<li><a href="#" onclick="enableSideBar();">Blog</a></li>
			<li><a href="#" onclick="enableSideBar();">Contacto Pibes</a></li>
			<li><a href="#" onclick="enableSideBar();">Acerca de</a></li>
		</ul>
<!-- ============================================ H E A D E R =================================================		-->		
		<div id="header">
			<div id="logo">
				<h1><a href="#">Comunidad Garmendia   </a></h1>
				<p> design by Piclez...</p>
			</div>
		</div>
<!-- ============================================ F I N  H E A D E R =================================================		-->		
		
		<div id="page">
				<div id="page-bgtop">
					<div id="page-bgbtm">
						
						<div class="panes">
							<div id="content">
								<c:if test="${hasToConfirm}">
										<h2 class="title">Eventos a Confirmar</h2>
										<div style="clear: both;">&nbsp;</div>
											<%--<div class="entry">--%>
											<p>La siguiente es una lista de eventos por realizarce hasta el dia de la fecha.</p>
											<p>En la presente version solo los eventos de <strong>Soccer</strong> estan disponibles</p>
											
											<fieldset>
													<legend>Soccer</legend>
													<label>Fecha</label>
													<p id="date">${date}</p>
													<label>Lugar</label>
													<p id="place">${place}</p>
													 
													 <input type="button"  id="assistButton" onclick="assist('${gameId}')" value="Asistiré"/>	
													 <input type="button" id="notAssistButton" onclick="notAssist(${gameId})" value="Declinaré como gallina"/>
							     				 	 <a href="javascript:getConfirmedPlayers(${gameId})">Lista Confirmados</a> 	
							     			</fieldset>
											<%--	</div>--%>
								</c:if>
								<div style="clear: both;">&nbsp;</div>
							</div>
							
							<%@include file="/WEB-INF/jsp/photoTab.jsp"%>
							<%@include file="/WEB-INF/jsp/videosTab.jsp"%>
							<%@include file="/WEB-INF/jsp/blogTab.jsp"%>
							<%@include file="/WEB-INF/jsp/contactsTab.jsp"%>
							<%@include file="/WEB-INF/jsp/aboutTab.jsp"%>
						</div>
						
 		<!-- ============================================ S I D E B A R =================================================     -->				
						<div id="sidebar">
							<ul>
								<li>
									<div id="search" >
									<form method="get" action="#">
										<div>
											<input type="text" name="s" id="search-text" value="" />
											<input type="submit" id="search-submit" value="GO" disabled="disabled"/>
										</div>
									</form>
									</div>
									<div style="clear: both;">&nbsp;</div>
								</li>
								<li>
									<h2>Soccer versión 0.1 (Beta)</h2>
									<p>Software para que no vayamos al dope los jueves y para sacar estadisticas de quien es el más puto de los pibes despues de Bito</p>
								</li>
								<li>
									<h2>Tabla de posiciones</h2>
									<ul>
										<li><a href="#">En construcción</a></li>
									</ul>
								</li>
								<li>
									<h2>Historial</h2>
									<ul>
										<li><a href="#">En construcción</a></li>
									</ul>
								</li>
								<li>
									<h2>El mas puto hoy es...</h2>
									<ul>
										<li><a href="#">En construcción</a></li>
									</ul>
								</li>
							</ul>
						</div>
		<!-- ============================================ F I N   S I D E B A R =================================================		-->
						
						<div style="clear: both;">&nbsp;</div>
					</div>
				</div>
			</div>
	</div>

<!-- ============================================ F O O T E R ========================================================		-->
		<div id="footer">
			<p>Copyright (c) 2010 Garmendia & Friends. All rights reserved. Design by Picklez.</p>
		</div>
<!-- ============================================ F I N  F O O T E R =================================================		-->

<!-- ============================================ H I D D E N  D I A L O G S =========================================		-->
		 
		 <div dojoType="dijit.Dialog" id="didi" style="width: 99%;height: 99%">	
		 	<table align="center" style="margin-top: 300px">
		 		<tr>
		 			<td><img alt="Loading" src="images/loading2.gif"></td>
		 		</tr>
		 	</table>
		 	
		 </div>
		 
		 <div dojoType="dijit.Dialog" id="playersTable" style="width: 100%;height: 100%;padding-top: 250px;padding-left: 100px;" align="center">	
		 	<table id="playersList" width="50%" height="50%" align="center" border="1">
		 	</table>
		 </div>
<!-- ============================================ F I N  H I D D E N  D I A L O G S ====================================		-->

</body>

</html>
